<template>
	<view>
		<u-tabs
			:list="splist" 
			:height="80" 
			name="categoryName"  
			:active-color="'#EF7B3A'"	
			:is-scroll="(splist.length <= 4 ? false : true)" 
			:current="current" 
			@change="handleTabChange" 
			style="width: 100%;"
			:transition="tabTransition"
		></u-tabs>
		<view class="coupon_list" v-if="current != 2 & !loading">
			<view class="coupon_item" v-for="(item,index) in coupon_list" :key="index">
				<view class="ordernumber">
					 <view>订单编号：{{item.orderNo}}</view>
					 <!-- <view>待核销</view> -->
				</view>
                 <view class="content" v-if="!loading & current == 0">
					 <view class="coupon_img">
					 	<image :src="'https:' + item.iconUrl" mode=""></image>
					 </view>
					 <view class="ifom">
						 <view class="name">{{item.title}}</view>
						 <view class="dibs">
						 	<view class="price">
						 		<text>￥</text>
						 		{{item.couponValue}}
						 	</view>
						 	<view class="yh">满 {{item.useThreshold}} 元可用</view>
						 </view>
						 <view class="period">
						 	有效期到：{{item.effectEnd}}
						 </view>
					 </view>
				 </view>
				 <view class="coupon-content" v-if="!loading && current == 1">
				   <view class="coupon-img">
				     <image :src="'https:' + item.productPics[0]" mode="aspectFill"></image>
				   </view>
				   <view class="coupon-info">
				     <view class="coupon-title">{{ item.productName }}</view>
				     <view class="coupon-price">￥{{ item.productPrice || '0.00' }}</view>
				 	<view class="coupon_sum">×{{item.quantity}}</view>
				 	<view class="coupon_jf">
				 		<image src="/static/my/integra.png" mode="widthFix"></image>
				 		<view>{{item.productCredit}}</view>
				 	</view>
				   </view>
				 </view>
				 <view class="btoom">
					 <view class="time">核销日期：{{item.writeOffTime | formatDate}}</view>
					 <view style="color: var(--Color, #F26B2E);">已核销</view>
				 </view>
			</view>
		</view>
		<view class="bolist" v-if="!loading && current == 2">
			<view class="bol_itme" v-for="(itme,index) in coupon_list" :key="index">
				<view class="time">{{itme.writeOffTime | formatDate}}</view>
				<view class="tpye">线下核销</view>
			</view>
		</view>
		<view class="no-more-data" v-if="coupon_list.length < 1 && !loading">暂无核销记录~</view>
		<view class="loading-status" v-if="loading">
		  <view class="loading-animation">
		    <view class="loading-dot" v-for="i in 3" :key="i"></view>
		  </view>
		  <view class="loading-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	import index from '../../store';
import { writeOffpage } from '@/core/api/index.js'
	import { mapState } from 'vuex';
	export default{
		computed: {
		  ...mapState({
		    userInfo: state => state.user.userInfo
		  })
		},
		data(){
			return{
				current:0,
				splist:[
					{
						categoryName:'优惠券核销'
					},
					{
						categoryName:'积分兑换核销'
					},
					{
						categoryName:'员工卡核销'
					}
				],
				coupon_list:[],
				writeOffStatus:0,
				isExpired:0,
				requst:false,
				loading:true
			}
		},
		onLoad(r) {
			console.log(r)
			this.current = r.index | 0
			this.userCouponpage()
		},
		methods:{
			handleTabChange(index){
				this.loading = true
				this.current = index
				if(index == 1){
					this.writeOffStatus = 1
					this.isExpired = 0
				}else if(index == 2){
					this.writeOffStatus = 0 
					this.isExpired = 1
				}else{
					this.writeOffStatus = 0
					this.isExpired = 0
				}
				this.userCouponpage()
			},
			Card(id){
				uni.navigateTo({
					url:'/pages/coupon/cardverification?id=' + id
				})
			},
			async userCouponpage(){
				let prmes = {
					page:1,
					size:20,
					condition:{
						type:this.current + 1
					}
				}
			    const {data} = await writeOffpage(prmes)	
				this.loading = false
				console.log(data.records)
				this.coupon_list = data.records
				this.requst = true
			}
		}
	}
</script>

<style lang="scss">
	.msg{
		margin: 100rpx auto;
	   text-align: center;
	}
	.no-more-data{
		text-align: center;
		margin: 100rpx 30rpx;
	}
	.coupon_list{
		padding: 20rpx 30rpx;
		// background-color: #fff;
		.coupon_item{
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 15rpx;
			// padding: 0;
			.ordernumber{
				display: flex;
				justify-content: space-between;
				padding: 22rpx 25rpx 22rpx 15rpx;
				view:nth-child(1){
					font-size: 24rpx;
					color: #333;
				}
				color: var(--Color, #F26B2E);
                font-size: 28rpx;
				border-bottom: 1rpx solid #F3F3F3;
			}
			.content{
				padding: 20rpx 20rpx;
				display: flex;
			}
			.coupon_img{
				width: 120rpx;
				height: 120rpx;
				image{
					width: 100%;
					border-radius: 10rpx;
					height: 100%;
				}
			}
			.ifom{
				margin-left: 20rpx;
				.name{
					font-size: 28rpx;
					font-weight: 700;
					width: fit-content;
					position: relative;
				}
				.pup_tpye{
					font-size: 20rpx;
					background-color: #FADFCF;
					color: #f98c50;
					position: absolute;
					padding: 5rpx 15rpx;
					    top: 5%;
					    right: -77%;
				}
				
				.dibs{
					display: flex;
					align-items: center;
					margin: 5rpx 0;
					.price{
						font-size: 32rpx;
						color: #EC691C;
						font-weight: 700;
						text{
							
							font-size: 30rpx;
						}
					}
					.yh{
						margin-left: 20rpx;
						font-size: 24rpx;
						color: #757575;
					}
				}
				.period{
					font-size: 24rpx;
				}
			}
			
		}
		.btoom{
			display: flex;
			padding: 22rpx 25rpx 22rpx 15rpx;
			justify-content: space-between;
			align-items: center;
			image{
				width: 24rpx;
				height: 24rpx;
				margin-right: 5rpx;
			}
			.time{
				font-size: 24rpx;
				color: var(--, #A3A3A3);
			}
			.btn{
				width: 130rpx;
				height: 52rpx;
				background: var(--Color, #F26B2E);
                color: #fff;
				display: flex;
				align-items: center;
                font-size: 24rpx;
				border-radius: 30rpx;
				justify-content: center;
			}
		}
	}
	.coupon-content {
	  display: flex;
	  padding: 20rpx;
	}
	
	.coupon-img {
	  width: 120rpx;
	  height: 120rpx;
	  margin-right: 20rpx;
	  border-radius: 8rpx;
	  overflow: hidden;
	}
	
	.coupon-img image {
	  width: 100%;
	  height: 100%;
	}
	
	.coupon-info {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  position: relative;
	  .coupon_sum{
		  position: absolute;
		  right: 0%;
		  top: 0%;
	  }
	  .coupon_jf{
		  position: absolute;
		  right: 0%;
		  bottom:0%;
		  image{
			  width: 20rpx;
			  margin-right: 5rpx;
		  }
		  display: flex;
		  align-items: center;
		  font-size: 32rpx;
		  font-weight: 600;
	  }
	}
	
	.coupon-title {
	  font-size: 28rpx;
	  font-weight: 500;
	  color: #333;
	  margin-bottom: 30rpx;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	
	.coupon-price {
	  font-size: 32rpx;
	  color: #EC691C;
	  font-weight: 600;
	}
	
	.coupon-footer {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 20rpx;
	  border-top: 1rpx solid #F5F5F5;
	}
	.loading-status {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding: 30rpx 0;
	}
	
	.loading-animation {
	  width: 40rpx;
	  height: 40rpx;
	  position: relative;
	  margin-right: 15rpx;
	}
	
	.loading-dot {
	  position: absolute;
	  width: 10rpx;
	  height: 10rpx;
	  background-color: #F26B2E;
	  border-radius: 50%;
	  animation: loading-dot 1.2s infinite ease-in-out;
	}
	
	.loading-dot:nth-child(1) {
	  top: 0;
	  left: 0;
	  animation-delay: -0.4s;
	}
	
	.loading-dot:nth-child(2) {
	  top: 0;
	  right: 0;
	  animation-delay: -0.2s;
	}
	
	.loading-dot:nth-child(3) {
	  bottom: 0;
	  left: 0;
	  animation-delay: 0s;
	}
	
	.no-more-data, .empty-tip {
	  text-align: center;
	  padding: 60rpx 0;
	  color: #999;
	  font-size: 28rpx;
	}
	
	.no-more-text {
	  display: inline-block;
	  padding: 10rpx 20rpx;
	  background-color: #F5F5F5;
	  border-radius: 30rpx;
	}
	
	.empty-tip {
	  color: #A3A3A3;
	}
	
	@keyframes loading-dot {
	  0%, 100% {
	    transform: scale(1);
	    opacity: 1;
	  }
	  50% {
	    transform: scale(0.5);
	    opacity: 0.5;
	  }
	}
	.bolist{
		display: flex;
		padding: 20rpx;
		flex-direction: column;
		.bol_itme{
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			padding: 30rpx 20rpx;
			width: 100%;
			margin-bottom: 10rpx;
			view:nth-child(2){
				color: #929292;
			}
		}
	}
</style>